<template>
  <div class="content">
    <ul>
      <li v-for="item in reying" :key="item.id">
        <div class="item_img"><img :src="item.img"/></div>
        <div class="item_text">
          <div class="item_nm"><b>{{ item.nm }}</b></div>
          <div class="item_sc" v-show="item.sc"><span>观众评</span><span>{{ item.sc }}</span></div>
          <div class="item_wish" v-show="!item.sc"><span>{{ item.wish }}</span><span>人想看</span>
          </div>
          <div class="item_desc">{{ item.desc }}</div>
          <div class="item_showInfo">{{ item.showInfo }}</div>
        </div>
        <div class="item_btn">
          <div :style="{background:item.showStateButton.color}">
            {{ item.showStateButton.content }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Movie",
  data() {
    return {
      reying: [],
    };
  },
  mounted() {
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4").then((res) => {
      console.log(res);
      res.data.data.hot.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
      });
      this.reying = res.data.data.hot;
    })
  }
}

</script>

<style scoped>
.content {
  overflow-y: scroll;
  margin-top: 160px;
}

ul,
li {
  list-style: none;
}

li {
  display: flex;
  justify-content: space-around;
}

.item_img {
  width: 25%;
}

.item_text {
  width: 50%;
  text-align: left;
}


.item_btn div {
  width: 60px;
  height: 30px;
  background: orangered;
  text-align: center;
  line-height: 30px;
  margin-top: 30px;
  color: #fff;
  border-radius: 15px;
}

.item_nm {
  font-size: 17px;
  margin-bottom: 0.267rem;
  text-align: left;
}

.item_sc, .item_wish {
  font-size: 0.4rem;
}

.item_sc span:nth-child(1) {
  color: #666666;
}

.item_sc span:nth-child(2) {
  color: #FAAF00;
  font-weight: bold;
  font-size: 0.453rem;
}

.item_wish span:nth-child(1) {
  color: #FAAF00;
  font-weight: bold;
  font-size: 0.453rem;
}

.item_wish span:nth-child(2) {
  color: #666666;
}

.item_desc {
  margin-top: 0.32rem;
  color: #666666;
  font-size: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.item_showInfo {
  margin-top: 0.32rem;
  color: #666666;
  font-size: 0.4rem;
}

img {
  width: 100%;
}

</style>